import { Radio, Space, Typography } from 'antd';
import { FC } from 'react';
import { defaultProps, ComponentProps } from './interface';

const { Paragraph } = Typography;

const Component: FC<ComponentProps> = (props) => {
  const { isVertical, title, options, value } = { ...defaultProps, ...props };
  const direction = isVertical ? 'vertical' : 'horizontal';

  const list = options?.map((item) => {
    const { label, value } = item;
    return (
      <Radio key={value} value={value}>
        {label}
      </Radio>
    );
  });

  return (
    <>
      <Paragraph strong>{title}</Paragraph>

      <Radio.Group value={value}>
        <Space direction={direction}>{list}</Space>
      </Radio.Group>
    </>
  );
};

export default Component;
